<template>
  <Modal v-model="modal" title="添加门店">
    <Form :model="form" ref="form">
        <FormItem label="选择门店" :label-width="80">
          <SelectStore ref="select-store" v-model="form.storeId" @on-change="onChange"></SelectStore>
        </FormItem>
    </Form>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">取消</Button>
        <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
</Modal>
</template>
<script>
import SelectStore from '~/SelectStore'
export default {
  components: {
    SelectStore
  },
  data() {
    return {
      modal: false,
      btnDisabled: false,
      form: {
        storeId: null
      },
      data: [],
      stoteInfo: {}
    };
  },
  methods: {
    resetForm(arr) {
      this.form.storeId = null
      this.data = arr
      this.openModal()
    },
    onChange(storeId, item) {
      this.stoteInfo = item || {}
    },
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onSave() {
      if (this.btnDisabled) return
      this.btnDisabled = true
      let flag = this.data.some(item => item.id === this.form.storeId)
      if (flag) {
        this.$Notice.error({
          title: '错误提示',
          desc: '这个门店已被添加，请重新选择新门店'
        })
        this.btnDisabled = false
      } else {
        this.stoteInfo.rewardRebate = null
        this.stoteInfo.rewardIntegral = null
        this.stoteInfo.rewardRemark = null
        this.stoteInfo.integralHidden = true
        this.stoteInfo.rebateHidden = true
        this.stoteInfo.remarkHidden = true
        this.$emit('complete', this.stoteInfo)
        this.btnDisabled = false
        this.$refs['select-store'].remote()
        this.closeModal()
      }
    }
  }
}
</script>

